$mainFontColor:#252525;
$secondFontColor:#999999;
$titleFontSize:0.4rem;
$secondFontSize:.3333333rem;
@function r ($px, $unit:750){
  @return $px/($unit/10)#{rem};
}

* {
  margin: 0;
  padding: 0;
}

.message-container {
  width: 10rem;
  height: 100vh;
  background: #f7f7f7;
  @at-root .message-header {
    width: inherit;
    height: 1.28rem;
    background: #ffffff;
    margin-bottom: 0.266666666rem;
    position: relative;
    @at-root .fa-angle-left {
      position: absolute;
      left: 0.546666666rem;
      bottom: 0.34666666666rem;
    }
    @at-root .msg {
      position: absolute;
      left: 3.52rem;
      bottom: 0.3466666rem;
      font-size: 0.453333333rem;
    }
    @at-root .fa-trash-o {
      position: absolute;
      right: 3.6266666666rem;
      bottom: 0.306666666rem;
    }
    @at-root .fa-user-o {
      position: absolute;
      right: 1.386666666rem;
      bottom: 0.3466666rem;
    }
    @at-root .fa-plus {
      position: absolute;
      bottom: 0.306666666rem;
      right: 0.52rem;
    }
  }
  @at-root .message-content {

    /*ul*/
    @at-root .list-content {
      background: #ffffff;
      /*li*/
      @at-root .list-item {
        list-style: none;
        height: 2.1333333rem;
        position: relative;
        @at-root .list-item__left {
          width: 1.2266666666rem;
          height: 1.2266666666rem;
          background: #f33131;
          border-radius: 0.13333333rem;
          display: inline-block;
          line-height: 2.13333333rem;
          position: absolute;
          left: 0.44rem;
          top: 0.4533333333rem;
          bottom: 0.45333333333rem;
          right: 0.45333333333rem;
          @at-root .fa-tags {
            color: #FFFFFF;
            &::before {
              content: '';
              position: absolute;
              top: 0.3333333rem;
              left: 0.32rem;
            }
          }
          @at-root .fa-bell {
            color: #FFFFFF;
            &::before {
              content: '';
              position: absolute;
              top: 0.3333333rem;
              left: 0.32rem;
            }
          }
          @at-root .fa-file {
            color: #FFFFFF;
            &::before {
              content: '';
              position: absolute;
              top: 0.3333333rem;
              left: 0.32rem;
            }
          }

        }
        @at-root .left-two {
          background: #ff8518;
        }
        @at-root .left-three {
          background: #00bf99;
        }
        @at-root .left-four {
          background: #2ea5ff;
          @at-root .top-line {
            font-size: 0.44rem;
            position: absolute;
            left: .173333333rem;
            bottom: -0.22666666rem;
            font-weight: bold;
            color: #FFFFFF;
          }
          @at-root .top-line1 {
            position: absolute;
            font-size: 0.44rem;
            left: .173333333rem;
            top: -0.22666666rem;
            font-weight: bold;
            color: #FFFFFF;
          }
        }
        @at-root .left-five {
          /*display: none;*/
        }
        @at-root .left-six {
          background: #d1a56a;
        }
        @at-root .list-item__right {
          width: 7.9333333333rem;
          height: inherit;
          position: absolute;
          display: inline-block;
          left: 2.1333333rem;
          bottom: 0;
          top: 0;
          right: 0;
          &::after {
            content: '';
            display: inline-block;
            width: 7.9333333rem;
            height: 1px;
            background: #e4e4e4;
            position: absolute;
            bottom: 0;
          }

          @at-root .title {
            font-size: $titleFontSize ;
            color: $mainFontColor;
            position: absolute;
            top: .613333333rem;

          }
          @at-root .time {
            font-size: .32rem;
            color: $secondFontColor;
            position: absolute;
            top: .6133333333rem;
            right: .34666666666rem;

          }
          @at-root p {
            color: $secondFontColor;
            font-size: $secondFontSize;
            position: absolute;
            bottom: .56rem;
          }
        }
        @at-root .list-item__l {
          width: 7.93333rem;
          height: 2.1333333rem;
          position: absolute;
          display: inline-block;
          /*left: .44rem;*/
          left: 2.1333333rem;
          &::after {
            content: '';
            display: inline-block;
            width: 7.9333333rem;
            height: 1px;
            background: #e4e4e4;
            position: absolute;
            bottom: 0;
          }
        }
        @at-root .list-item__r {
          width: 1.733333333rem;
          height: 2.1333333333rem;
          background: #f12a2a;
          position: absolute;
          right: 0;
          display: none;
          @at-root .del {
            line-height: 2.13333333rem;
            font-size: .4rem;
            color: #FFFFFF;
            position: absolute;
            right: .493333333rem;

          }
        }
      }
    }
  }
}